<script>
    import Card from "../base/Card.svelte";
    import {onMount} from "svelte";
    import BuilderManager from "../../scripts/Builder/BuilderManager.js";
    import Bar from "../base/Bar.svelte";
    import BuildSide from "../Side/Instance/BuildSide.svelte";

    export let building = {
        "id": 1,
        "row": 18,
        "col": 2,
        "master": true,
        "power": "红魔馆",
        "save": {
            "name": "红魔馆",
            "security": 89,
            "prosperity": 78,
            "description": "阴森森的红魔馆，是吸血鬼蕾米莉亚的府邸"
        }
    }

    let buildingManager = null;
    let build_load_data = {}

    $:{
        if (buildingManager) {
            build_load_data.image = buildingManager.getBuilderImage(building.id)
            build_load_data.save = building.save
        }
    }

    onMount(() => {
        buildingManager = new BuilderManager(window);
    })


</script>
{#if buildingManager !== null}
    <Card config_sub="{false}">
        <div slot="badge" class="badge-building">
            {building.power}
        </div>

        <div class="row-card building-card">
            <img src={build_load_data.image} alt="">
            <div class="building-info">
                <div class="row">
                    <span class="info-key building-attr"><h3>{build_load_data.save.name}</h3></span>
                    <!--{get_character().name}-->
                </div>
                <div class="row building-attr  barrow">
                    <span class="info-key">繁华度</span>
                    <Bar
                            maxValue="{100}"
                            value="{build_load_data.save.prosperity}"
                            animated="{true}"
                            color="red"
                            width="160px"
                            height="10px"
                            showText="{false}"
                    />
                </div>
                <div class="row building-attr barrow">
                    <span class="info-key">安全</span>
                    <Bar
                            maxValue="{100}"
                            value="{build_load_data.save.security}"
                            animated="{true}"
                            color="blue"
                            width="160px"
                            height="10px"
                            showText="{false}"
                    />
                </div>

            </div>
        </div>
    </Card>
{/if}

<style lang="less">
    .building-card{
      padding-top: 5px;
      box-sizing: border-box;
    }
    .building-attr{
      text-align: left;
    }
    .building-card{
      z-index: 2;
    }
    .building-info{
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
</style>